<template>
  <div class="chargeback">
    <!-- 头部 -->
    <div
      v-if="
        [
          'chargeBackDetailsTask',
          'chargeBackDetailsDocument',
          'chargeBackDetailsBill',
          'chargeBackDetailsDynamic'
        ].includes($route.name)
      "
      class="dgg-order-nav"
    >
      <span class="dgg-order-state">{{ transactionItem.orderStatus }}</span>

      <el-menu
        :default-active="defaultActive"
        class="dgg-submenu-nav"
        mode="horizontal"
      >
        <el-menu-item
          key="1"
          index="1"
          @click="menuJump('chargeBackDetailsTask')"
          >任务</el-menu-item
        >
        <el-menu-item
          key="2"
          index="2"
          @click="menuJump('chargeBackDetailsDocument')"
          >文档</el-menu-item
        >
        <!--  <el-menu-item
          key="3"
          index="3"
          @click="menuJump('chargeBackDetailsBill')"
          >底单</el-menu-item
        > -->
        <el-menu-item
          key="4"
          index="4"
          @click="menuJump('chargeBackDetailsDynamic')"
          >动态</el-menu-item
        >
      </el-menu>
      <div class="dgg-details-member">
        <div class="memberImgLists">
          <el-image
            v-for="member in memberImgLists"
            :key="member"
            :src="member"
            style="width: 27px; height: 27px"
            fit="cover"
          />
        </div>
        <dgg-icon
          class="more-member"
          icon-class="icon_more"
          svg-width="26px"
          svg-height="26px"
          @click="openMemberSet"
        />
      </div>
    </div>
    <div v-if="$route.name === 'chargeback'" class="tabs-item-head">
      <div>
        <dgg-icon
          :icon-class="searchState ? 'icon_screen_selected' : 'icon_screen'"
          class="dgg-search"
          svg-width="15px"
          svg-height="15px"
          @click="searchState = !searchState"
        />
        <dgg-input
          v-model="searchData"
          :maxlength="30"
          class="search"
          placeholder="地区/产品/合同/客户/生产单号"
          @input="searchData = searchData.replace(/\s+/g, '')"
        >
          <dgg-icon
            slot="prefix"
            icon-class="dgg-search"
            svg-width="15px"
            svg-height="15px"
          />
        </dgg-input>
        <dgg-button
          v-if="!searchState"
          plain
          class="receive-button default-btn-with"
          @click="searchClick"
        >
          搜 索
        </dgg-button>
        <dgg-button
          v-if="!searchState"
          plain
          class="dgg-button-nocolor default-btn-with"
          @click="resetClick"
        >
          重 置
        </dgg-button>
      </div>

      <div v-if="searchState" class="tabs-item-query">
        <dgg-query
          ref="query"
          :query-list="queryList"
          :can-export="false"
          clear-value
          @resetEvent="resetQuery"
          @search="search"
          @changeEvent="queryEmit"
        />
      </div>
    </div>

    <div v-if="$route.name === 'chargeback'" class="chargeback-body">
      <dgg-edit-table
        :data="dataList.records"
        :columns="columns"
        :request-data-api="get_order_model_by_status"
        :params="params"
        :page-info="dataList.totalPage"
        @row-click="rowClick"
      />
    </div>
    <router-view />

    <el-drawer
      v-if="memberSet"
      :visible.sync="memberSetDrawer"
      :modal-append-to-body="false"
      :before-close="memberSetClose"
      :append-to-body="false"
      :modal="false"
      title="成员设置"
      direction="rtl"
      custom-class="order-member-set"
      style="position: absolute;"
      size="300px"
    >
      <div class="dgg-member-info">
        <div class="person-charge">
          <p class="top">
            <span>项目负责人</span>
          </p>
          <p class="bottom">
            <img :src="projectManager.photoUrl" class="headImg" alt="" /><span
              >{{ projectManager.userName }}</span
            >
          </p>
        </div>

        <div class="project-members">
          <p class="top">
            <span>项目成员</span>
          </p>
        </div>

        <ul class="members-list">
          <li
            v-for="(item, index) in assistHandle"
            :key="index"
            class="current-list"
          >
            <div class="left">
              <img :src="item.photoUrl" alt="" class="headImg" />
              <span>{{ item.userName }}</span>
            </div>
          </li>
        </ul>
      </div>
    </el-drawer>
  </div>
</template>

<script>
// 加载页
// eslint-disable-next-line no-unused-vars
import { mapState, mapActions, mapMutations } from "vuex";
import moment from "moment";

export default {
  name: "Chargeback",
  components: {},
  data() {
    return {
      memberSetDrawer: false,
      projectManager: {},
      assistHandle: [],
      activeName: "first",
      search1: "",
      searchState: false,
      columns: [
        {
          prop: "productName",
          width: "175",
          label: "业务产品",
          type: "isrender",
          render: (h, params) => {
            let _iconName = "noicon_order_icon";
            if (params.row.businessProductCode === "BUS_YT_FL_FS") {
              _iconName = "order_icon_nonlitigation";
            }
            if (params.row.businessProductCode === "BUS_YT_FL_MSSS") {
              _iconName = "icon_civil_order";
            }
            if (params.row.businessProductCode === "BUS_YT_FL_XZSS") {
              _iconName = "order_icon_litigation";
            }
            if (params.row.businessProductCode === "BUS_YT_FL_XSSS") {
              _iconName = "order_icon_criminal";
            }
            if (params.row.businessProductCode === "BUS_YT_FL_FLGW") {
              _iconName = "order_icon_law";
            }
            return (
              <div>
                <div>
                  <dgg-icon
                    class="fl"
                    icon-class={_iconName}
                    style="margin-right:10px;"
                    svg-width="48px"
                    svg-height="23px"
                  />
                </div>
                <span class="dgg-text-ellip" style="display: block;">
                  {params.row.productName}
                </span>
              </div>
            );
          }
        },
        {
          prop: "scOrderNo",
          label: "生产单编号",
          width: "140",
          type: "isrender",
          render: (h, params) => {
            return (
              <div
                style="color:#10BBB8;cursor: pointer;"
                class="dgg-text-ellip"
                onClick={e => {
                  // this.ruoterJump({
                  //   name: 'chargeBackDetails',
                  //   params: {
                  //     id: params.row.id
                  //   }
                  // });
                }}
              >
                {params.row.scOrderNo}
              </div>
            );
          }
        },
        { prop: "customerName", width: "160", label: "客户名称" },
        { prop: "region", width: "100", label: "办理地区" },
        { prop: "commission", label: "佣金/比例" },
        {
          prop: "transactor",
          label: "办理人",
          type: "isrender",
          width: "180",
          render: (h, params) => {
            if (params.row.projectMemberJson) {
              const _array = JSON.parse(params.row.projectMemberJson);
              let main = "";
              let support = "";
              main =
                _array
                  .filter(item => {
                    return parseInt(item.isMainHandle) === 1;
                  })
                  .map(item => {
                    return item.userName;
                  })
                  .join("、") || "";
              support =
                _array
                  .filter(item => {
                    return parseInt(item.isMainHandle) === 2;
                  })
                  .map(item => {
                    return item.userName;
                  })
                  .join("、") || "";
              return (
                <div>
                  <p class="dgg-text-ellip"> 主办：{main} </p>
                  <p class="dgg-text-ellip"> 协办：{support}</p>
                </div>
              );
            } else {
              return (
                <div>
                  <p> 主办：-- </p>
                  <p> 协办：--</p>
                </div>
              );
            }
          }
        },
        {
          prop: "orderStatus",
          width: "100",
          label: "状态",
          type: "isrender",
          render: (h, params) => {
            // const _name = this.getorderStatus(params.row.orderStatus);
            return <div class="dgg-text-ellip">{params.row.orderStatus}</div>;
          }
        },
        {
          prop: "applicationRefundTime",
          label: "退单时间",
          type: "isrender",
          render: (h, params) => {
            return <div>{params.row.applicationRefundTime}</div>;
          }
        }
      ],
      list: [],
      searchData: "",
      paramsData: {},
      paramsSearchData: {}
    };
  },
  computed: {
    ...mapState(["userId", "transactionItem", "personMsg", "orderStatusName"]),
    ...mapState("chargebackModule", ["dataList", "commodityOptions"]),
    ...mapState("orderModule", [
      "areaOptions",
      "productOptions",
      "orderTeamOptions"
    ]),
    memberSet() {
      return [
        "chargeBackDetailsTask",
        "chargeBackDetailsDocument",
        "chargeBackDetailsBill",
        "chargeBackDetailsDynamic"
      ].includes(this.$route.name);
    },
    memberImgLists() {
      const imgArr = [];
      imgArr.push(this.projectManager.photoUrl);
      this.assistHandle.forEach((item, index) => {
        imgArr.push(item.photoUrl);
      });
      return imgArr;
    },
    params() {
      return {
        orderStatusList: ["QDS_SC_ORDER_STATUS_CODE05"],
        ...this.paramsData
      };
    },
    queryList() {
      return [
        {
          field: "businessProductCode",
          type: "select",
          label: "业务",
          width: "220px",
          value: "",
          options:
            [
              ...[{ label: "全部", value: "" }],
              ...this.productOptions.map(item => {
                return {
                  value: item.code,
                  label: item.name
                };
              })
            ] || []
        },
        {
          field: "productId",
          type: "select",
          label: "产品",
          value: "",
          width: "220px",
          options:
            [
              ...[{ label: "全部", value: "" }],
              this.commodityOptions.map(item => {
                return {
                  value: item.id,
                  label: item.name
                };
              })
            ] || []
        },
        {
          field: "regionCode",
          type: "select",
          label: "地区",
          width: "220px",
          value: "",
          options:
            this.areaOptions.map(item => {
              return {
                value: item.code,
                label: item.name
              };
            }) || []
        },
        {
          field: ["startTime", "endTime"],
          type: "daterange",
          label: "时间",
          width: "220px",
          value: ""
        },
        {
          label: "佣金",
          width: "220px",
          children: [
            {
              field: "commissionLow",
              type: "input",
              label: "test1",
              width: "97px",
              placeholder: "最低",
              value: ""
            },
            {
              field: "commissionHight",
              type: "input",
              label: "test1",
              width: "97px",
              placeholder: "最高",
              value: ""
            }
          ]
        }
      ];
    },
    defaultActive() {
      let _key = "1";
      if (this.$route.name === "chargeBackDetailsTask") {
        _key = "1";
      }
      if (this.$route.name === "chargeBackDetailsDocument") {
        _key = "2";
      }
      if (this.$route.name === "chargeBackDetailsBill") {
        _key = "3";
      }
      if (this.$route.name === "chargeBackDetailsDynamic") {
        _key = "4";
      }
      return _key;
    }
  },
  watch: {
    async memberSet(val) {
      if (val) {
        const res = await this.get_assist_handle({
          id: this.transactionItem.id
        });
        if (res.code === 200) {
          this.assistHandle = res.data.projectMember;
          this.projectManager = res.data.projectManager;
        }
      }
    }
  },
  async mounted() {
    if (
      [
        "chargeBackDetailsTask",
        "chargeBackDetailsDocument",
        "chargeBackDetailsBill",
        "chargeBackDetailsDynamic"
      ].includes(this.$route.name)
    ) {
      const res = await this.get_assist_handle({ id: this.transactionItem.id });
      if (res.code === 200) {
        this.assistHandle = res.data.projectMember;
        this.projectManager = res.data.projectManager;
      }
    }
  },
  activated() {
    //
  },
  created() {
    //
  },
  beforeDestroy() {
    //
  },
  methods: {
    ...mapActions("transactionModule", ["get_assist_handle"]),
    ...mapActions(["ruoterJump"]),
    ...mapActions("chargebackModule", [
      "get_order_model_by_status",
      "find_product"
    ]),
    ...mapMutations(["setTransactionItem"]),
    // 打开成员设置界面
    openMemberSet() {
      this.memberSetDrawer = true; // 打开成员设置
    },
    memberSetClose(done) {
      done();
    },
    resetQuery() {
      this.searchData = "";
    },
    async queryEmit(val, field) {
      if (field === "businessProductCode") {
        //
        await this.find_product({
          proType: val
        });
        this.$refs["query"].resetFieldValue("productId");
      }
    },
    search(val) {
      this.paramsSearchData = val;
      this.paramsData = this.paramsSearchData;
    },
    searchClick() {
      this.paramsData = {
        customerOrScOrderNoOrContractNo: this.searchData
      };
    },
    resetClick() {
      this.searchData = "";
      this.paramsData = {};
    },
    rowClick(row) {
      this.ruoterJump({
        name: "chargeBackDetailsTask",
        params: {
          title: `${row.customerName}-${row.scOrderNo}`
        }
      });
      this.setTransactionItem(row);
    },
    menuJump(name) {
      // 顶部导航栏跳转
      this.ruoterJump({
        name: name,
        params: {
          title: `${this.transactionItem.customerName}-${this.transactionItem.scOrderNo}`
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
@import "~@/assets/less/main.less"; //引入全局less文件
.chargeback {
  width: 100%;
  background: rgba(255, 255, 255, 1);
  margin: 0 0 40px;
  border-radius: 6px;
  //成员设置
  /deep/.order-member-set {
    padding: 0 10px;
    overflow-y: scroll;
    .el-drawer__header {
      margin: 0;
      height: 60px;
      color: #19233c;
      padding: 0 10px;
      line-height: 60px;
      font-size: 16px;
      font-weight: 500;
      .dgg-text-ellip;
    }
    .dgg-member-info {
      .person-charge {
        height: 100px;
        border-top: 1px solid #edeff0;
        border-bottom: 1px solid #edeff0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 20px 10px 18px 10px;
        .top {
          height: 18px;
          line-height: 18px;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          justify-content: space-between;
          & > span {
            display: inline-block;
            flex: 1;
            .dgg-text-ellip;
            font-size: 13px;
            font-weight: 400;
            color: #9398a1;
          }
          .dgg-button {
            line-height: 18px;
            padding-left: 10px;
            max-width: 62px;
            font-size: 13px;
            border: none;
          }
        }
        .bottom {
          display: flex;
          align-items: center;
          height: 28px;
          .headImg {
            width: 27px;
            height: 27px;
            border-radius: 50%;
            flex-shrink: 0;
          }
          & > span {
            margin-left: 14px;
            flex: 1;
            .dgg-text-ellip;
            font-size: 14px;
            color: #666873;
          }
        }
      }
      .project-members {
        padding: 20px 20px 12px 10px;
        .top {
          height: 18px;
          line-height: 18px;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          justify-content: space-between;
          & > span {
            display: inline-block;
            flex: 1;
            .dgg-text-ellip;
            font-size: 13px;
            font-weight: 400;
            color: #9398a1;
          }
          .dgg-button {
            line-height: 18px;
            padding: 0 10px;
            max-width: 62px;
            font-size: 13px;
            border: none;
            padding-right: 0;
          }
        }
      }
      .members-list {
        .current-list {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: nowrap;
          height: 34px;
          margin-bottom: 14px;
          padding-right: 20px;
          padding-left: 10px;
          .left {
            position: relative;
            height: 100%;
            flex-shrink: 0;
            width: 134px;
            border-radius: 18px;
            font-size: 14px;
            display: flex;
            align-items: center;
            flex-wrap: nowrap;

            /*&:hover {*/
            /*  background-color: #f5f7fa;*/
            /*  .cancel-merber-icon {*/
            /*    display: block;*/
            /*  }*/
            /*}*/
            .headImg {
              width: 27px;
              height: 27px;
              border-radius: 50%;
              flex-shrink: 0;
            }
            & > span {
              height: 100%;
              display: inline-block;
              line-height: 34px;
              margin-left: 14px;
              flex: 1;
              .dgg-text-ellip;
            }
            .cancel-merber-icon {
              display: none;
              position: absolute;
              right: -5px;
              top: -5px;
              cursor: pointer;
            }
          }
          .memberTypeSet {
            width: 80px;
            border: none;
            .el-input__suffix {
              width: 16px;
            }
            .el-input--suffix .el-input__inner {
              padding-right: 16px;
              border: none;
            }
            .el-input__icon {
              width: 16px;
            }
          }
        }
      }
    }
  }
  .dgg-order-nav {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
    height: 50px;
    overflow: hidden;
    padding: 0 30px;
    border-bottom: 1px solid #e3e4e6;
    border-radius: 6px 6px 0 0;
    .dgg-order-state {
      width: 80px;
      line-height: 26px;
      display: inline-block;
    }
    .dgg-button-group {
      height: 100%;
      display: flex;
      align-content: center;
      flex-wrap: nowrap;
      /deep/.el-button {
        padding: 0 15px;
        margin-left: 10px;
        border: 0;
        border-bottom: 1px solid transparent;
        &:first-child {
          margin-left: 0;
        }
        &:hover {
          color: #10bbb8;
          border-color: #10bbb8;
        }
      }
    }
    .dgg-submenu-nav {
      .el-menu-item {
        height: 50px;
        line-height: 50px;
        margin-left: 10px;
        &.first-child {
          margin-left: 0;
        }
      }
    }
    .dgg-details-member {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      .memberImgLists {
        display: flex;
        align-items: center;
        .el-image {
          width: 27px;
          height: 27px;
          overflow: hidden;
          border-radius: 50%;
          &:not(:first-child) {
            margin-left: -6px;
          }
          /deep/.el-image__inner {
            width: 27px;
            height: 27px;
            overflow: hidden;
            border-radius: 50%;
            border: 2px solid #fff;
          }
        }
      }
      .more-member {
        border-radius: 50%;
        margin-left: -6px;
        z-index: 10;
        cursor: pointer;
      }
    }
  }
  .search {
    width: 270px;
    height: 30px;
    margin-left: 20px;
    > input {
      background: rgba(240, 242, 245, 1);
      border: none;
    }
  }
  .el-tabs__nav-scroll {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .dgg-search {
    margin-left: 30px;
    cursor: pointer;
  }
  .icon_info {
    cursor: pointer;
    margin-right: 30px;
    line-height: 30px;
  }
  .tabs-item-head {
    min-height: 70px;
    padding: 20px 0px;
  }
  .chargeback-body {
    padding: 0 10px;
  }
  .chargeback-button {
    border-radius: 4px;
    border: 1px solid rgba(16, 187, 184, 1);
  }
}
</style>
